<template>
	<view class="container">
		<view class="cellGroup">
			<view class="title">刺梨卡</view>
			<view class="cell b-b">
				<text class="tit">卡号</text>
				<input type="text" :disabled="disabled" v-model="cardno" placeholder="请输入卡号" placeholder-class="grey" />
			</view>
			<view class="cell">
				<text class="tit">卡密</text>
				<input type="text" :disabled="disabled" :password="passwordShow" v-model="pswd" placeholder="请输入卡密码"
				 placeholder-class="grey" />
				<uni-icons class="eyes" type="eye" size="20" color="#bbb" @tap="eyecheck('hide')" v-if="eyeStyle == 'show'"></uni-icons>
				<uni-icons class="eyes" type="eye-slash-filled" color="#bbb" size="20" @tap="eyecheck('show')" v-else></uni-icons>
			</view>


		</view>
		<view class="actives">
			{{msg}}

		</view>
		<view class="btn" @tap="submit">立即激活</view>
	</view>
</template>

<script>
	import {
		bindingTratt,
		trattConfig
	} from "@/api/order.js"

	export default {
		data() {
			return {
				disabled: true,
				cardno: "",
				passwordShow: true,
				pswd: "",
				eyeStyle: "hide",
				msg: '',
				order:false,//激活后是否返回订单页面
			};
		},
		onLoad(options) {
			this.disabled = false
			this.init()
			if (options.item) {
				let item = JSON.parse(decodeURIComponent(options.item))
				this.cardno = item.card_number
				this.pswd = item.pswd
				this.disabled = true
			}
			if(options.type ){
				this.order = true
			}
		},
		methods: {
			init() {
				trattConfig({
					filed: 'cili_activation_mark'
				}).then(res => {
					this.msg = res.msg
				})
			},
			submit() {
				uni.showLoading({
					mask: true
				})
				bindingTratt({
					card_number: this.cardno,
					pswd: this.pswd
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "激活成功",
						duration: 600
					})
					let _this = this
					console.log(uni.getStorageSync('confirmId'),3333331)
					setTimeout(function() {
						if(_this.order){
							let id = uni.getStorageSync('confirmId')
							uni.navigateTo({
								url:'/pages/center/prickly/order?cartId='+id
							})
						}else{
							uni.$emit('change')
							uni.navigateBack({})
						}
					}, 600)
				})
			},
			eyecheck(type) {
				this.eyeStyle = type
				this.passwordShow = !this.passwordShow
			},
		}
	};
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 70rpx;

		.cellGroup {
			background-color: #fff;

			.title {
				padding: 0 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #FAFAFA;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.cell {
				margin: 0 30rpx;
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				position: relative;

				.eyes {
					position: absolute;
					right: 0;
					height: 100rpx;
					font-weight: normal;
					width: 100rpx;
					line-height: 100rpx;
				}

				.tit {
					height: 100rpx;
					line-height: 100rpx;
					min-width: 130rpx;
					width: 130rpx;
				}

				.uni-list {
					display: flex;
					align-items: center;
				}

				.uni-list-cell {
					float: left;
					margin-right: 60rpx;
					display: flex;
				}

				input {
					width: 460rpx;
					height: 100rpx;
					line-height: 100rpx;
				}

				.veri {
					position: absolute;
					right: 0;
					top: 20rpx;
					font-size: 28rpx;
					color: #2699F0;
					padding: 10rpx 26rpx;
					border: 2rpx solid #2699F0;
					border-radius: 50rpx;
					font-weight: normal;
				}

				.ver {
					font-weight: normal;
					position: absolute;
					right: 0;
					top: 32rpx;
					font-size: 24rpx;
					color: #bbb;
					padding: 2rpx 10rpx;
				}
			}


			.b-b {
				border-bottom: 1rpx solid #EEEEEE;
			}
		}

		.actives {
			width: 690rpx;
			height: 120rpx;
			background: #EEEEEE;
			border: 2rpx dashed #CCCCCC;
			border-radius: 4rpx;
			margin: 50rpx auto;
			color: #666666;
			font-size: 24rpx;
			padding: 20rpx 25rpx 33rpx 18rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.btn {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 70rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
